<template>
  <div id="app">
    <div style="margin-bottom: 20px">
      <el-select v-model="dept" clearable
            multiple
            filterable
              collapse-tags>
        <el-option value="">全部</el-option>
        <el-option v-for="item in options"
          :key="item.id"
          :label="item.label"
          :value="item.id"></el-option>
      </el-select>
      <el-button @click="onQuery" style="margin-left:10px">查询</el-button>
      <el-button @click="gernateCol(500)">500列</el-button>
      <el-button @click="gernateCol(1000)">1000列</el-button>
    </div>
    <div>
      <el-table  :data="tableData"
          border
          ref="tableBox"
          v-loading="loading"
          force-scroll="horizontal"
          style="overflow: auto !important;height:500px"
          :header-cell-style="{'text-align':'center'}">
        <!-- <el-table-column
            prop="id"
            label="序号"
            align="center"
            width="150"
            :show-overflow-tooltip="true"/>
          <el-table-column
            width="150"
            prop="mk"
            label="模块"
            align="center"
            :show-overflow-tooltip="true"/>
          <el-table-column
            prop="name"
            label="指标名称"
            min-width="150"
            class-name="indicator"
            :show-overflow-tooltip="true"
          /> -->
          <!-- <el-table-column label="全院"> -->
            <el-table-column
              v-for="col in visualColumns"
              :key="col.key"
              :prop="col.key"
              :label="col.name"
              width="150"
              align="right"
              :formatter="formatCellThousand"
            />
          <!-- </el-table-column> -->
      </el-table>
    </div>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
import _ from 'lodash'

export default {
  name: 'App',
  props: {
    columns: [],
  },
  data() {
    return {
      options: [],
      tableData: [],
      loading: false,
      dept: '',
      //visualColumns: [],
      allColumns: [],
      scrollLeft: 0,
      startIndex: 0,
      endIndex: 20
    }
  },
  mounted() {
    this.getOptions()
    this.gernateCol(1000)
    this.onQuery()
    this.computeWidth()
    this.registerScrollListener()
  },
  computed: {
    visualColumns() {
      return this.allColumns.slice(
        this.startIndex,
        this.endIndex
      );
    }
  },
  // watch: {
  //   scrollLeft(left) {
  //     console.log(left)
  //     this.calcColumns(left)
  //   }
  // },
  methods: {
    calcColumns(scrollLeft = this.scrollLeft) {
      // this.startIndex = Math.floor(scrollLeft / 150);
      // this.visualColumns = this.allColumns.slice(
      //   this.startIndex,
      //   this.startIndex + 17
      // );
      
      // bodys[0].style.width =  width + "px";
      let mainTable = this.$refs.tableBox.$el.getElementsByClassName(
        "el-table__body"
      );

      mainTable[0].style.marginLeft=scrollLeft+ "px";
    },
    onQuery() {
      this.getData(1000)
    },
    gernateCol(n) {
      const columns = []
      for(let i=0;i<n;i++){
        columns.push({
          key: `col${i}`,
          name: `列${i}`
        })
      }
      this.allColumns = columns
    },
    getOptions() {
      setTimeout(() => {

        for(let i=0;i<500;i++) {
          this.options.push({
            id: i,
            label: `科室${i}`
          })
        }
      }, 100)
    },
    getData(totalCol) {
      this.loading = true
      setTimeout(() => {
        const result = []
        for(let i = 0; i<8;i++) {
          const item = {
            id: i,
            mk: '模块'+i,
            name: '指标名称'+i
          }
          for(let col = 0; col<totalCol; col++) {
            item[`col${col}`] = `row${i}-col${col}`
          }
          result.push(item)
        }
        this.tableData = result
        this.$nextTick(() => {
          this.calcColumns()
        })
        this.loading = false
      }, 500)
    },
    formatCellThousand(row, column, cellValue) {
      return '$:'+cellValue
    },
    computeWidth() {
      let width = this.allColumns.length * 150;
      const bodys = document.getElementsByClassName('el-table__body')
      const div = document.createElement('div')
      div.style.width = width + "px"
      div.style.height = '1px'
      bodys[0].appendChild(div)
    },
    registerScrollListener() {
      // this.$refs.tableBox.bodyWrapper.scrollWidth = 8000
      this.debounceFn = _.debounce(() => {
        let scrollLeft = this.$refs.tableBox.bodyWrapper.scrollLeft;
        const newIndex = Math.floor(scrollLeft / 150)
        if (newIndex !== this.startIndex) {
          this.startIndex = Math.floor(scrollLeft / 150)
          this.endIndex = this.startIndex + 20
        }
        this.calcColumns(scrollLeft)
      }, 100);
      this.$refs.tableBox.bodyWrapper.addEventListener("scroll", this.debounceFn);
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
